$(function () {
 let form = layui.form
 let layer = layui.layer
 initArtCateList()
 function initArtCateList() {
  axios({
   method: 'GET',
   url: '/my/article/cates',
   headers: {
    Authorization: localStorage.getItem('token')
   }
  }).then(function (res) {
   console.log(res.data.data)
   // 获取成功后
   let arr = ['<option value="">请选择类别</option>']
   res.data.data.forEach(function (ele) {
    arr.push(`
<option value="${ele.Id}">${ele.name}</option>
`)
   })
   let str = arr.join("")
   layui.form.render()
  })
 }

 // 需求2: 初始化富文本编辑器
 initEditor();

 // 需求3: 文章封面
 // 1. 初始化图片裁剪器
 var $image = $('#image')
 // 2. 裁剪选项
 var options = {
  aspectRatio: 400 / 280,
  preview: '.img-preview'
 }


 // 1.3 创建裁剪区域
 $image.cropper(options)

 // 确定状态
 let state
 $('#btnSava1').on('click', function () {
  state = '已上传'
 })
 $('#btnSava2').on('click', function () {
  state = '草稿'
 })

 // 选择封面
 $('#choose-image').on('click', function () {
  $("#file").click()
 })
 $("#file").on('change', function (e) {
  var file = e.target.files[0]
  var newImgURL = URL.createObjectURL(file)
  $image
   .cropper('destroy')      // 销毁旧的裁剪区域
   .attr('src', newImgURL)  // 重新设置图片路径
   .cropper(options)        // 重新初始化裁剪区域

 })

 // 表单提交
 $("#pub-form").on('submit', function (e) {
  e.preventDefault();
  // 更加form表单，创建要给 formdata 对象
  let fd = new FormData(this);
  // 添加状态
  fd.append('state', state);
  // 添加文件
  $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
   width: 400,
   height: 280
  }).toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
   // 得到文件对象后，进行后续的操作
   fd.append("cover_img", blob);
   console.log(...fd);

   // TODO: 后面上传文件的ajax，也要写道这个回掉函数中！
   //  jQuery中的ajax 和 axios 两种方式实现文件上传！


   // 方法1 : ajax 方法
   // $.ajax({
   //  method: 'POST',
   //  url: 'http://api-breakingnews-web.itheima.net/my/article/add',
   //  data: fd,
   //  contentType: false,
   //  processData: false,
   //  headers: {
   //   Authorization: localStorage.getItem('token')
   //  },
   //  success: function (res) {
   //   console.log(res)
   //   layer.msg(res.message)
   //  }
   // })


   // 方法2 : axios
   axios({
    method: 'POST',
    url: '/my/article/add',
    data: fd,
    headers: {
     Authorization: localStorage.getItem('token')
    }
   }).then(function (res) {
    if (res.data.status != 0) {
     layer.msg(res.data.message)
    }
    layer.msg('文章添加成功')
    // 页面跳转
    // setTimeout(window.parent.document.querySelector('#art_list').click(), 1500)

   })




  });
 })


})


